<script setup>
import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
import Card from '@/views/new-screen/components/card.vue'
import DrawEcharts from '@/components/draw-echarts.vue'
import * as echarts from 'echarts'
import jzmj from '../../../../assets/imgs/ic_jzmj.png'
import { getPie3DOption } from '../../info-house-overview/left/getPie3DOption'
import DotsTabs from '../../components/dotsTabs.vue'
import icon_house from '@/assets/imgs/bt_sy.png'

import {
  getProjectOverview,
  getCheckNum,
  getConstructionRanking
} from '../api.js'


const props = defineProps({
  isExpanded: Boolean,
  activeName: String,
})
const getChartPieOption = ({ list, image }) => {
  const total = list.reduce((a, b) => a + b.value, 0)
  return {
    tooltip: {
      trigger: 'item',
      formatter: '{b} <br/> {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      top: 'middle',
      left: '55%',
      data: list.map(item => item.name),
      itemWidth: 10,
      itemHeight: 10,
      icon: 'circle',
      itemGap: 30,
      textStyle: {
        color: '#fff',
        fontSize: 12
      },
      formatter: (name) => {
        const value = list.find(item => item.name === name).value
        const per = parseFloat((value / total * 100).toFixed(2))
        return name + '  ' + value + '  ' + per + '%'
      }
    },
    series: [
      {
        name: '分类',
        type: 'pie',
        radius: ['42%', '56%'],
        center: ['25%', '50%'],
        padAngle: 3, // 轻微的角度间隙
        labelLine: {
          length: 1
        },
        inverse: true,
        label: {
          show: false,
          formatter: '{b|{b}}\n{hr|}\n{per|{d}%}  ',
          rich: {
            b: {
              color: '#ffffff',
              fontSize: 14,
            },
            hr: {
              borderColor: '#8C8D8E',
              width: '100%',
              borderWidth: 1,
              height: 0
            },
            c: {
              color: '#ffffff',
              fontSize: 14,
              lineHeight: 28
            },
            unit: {
              color: '#ccc',
              fontWeight: 'normal',
            },
            per: {
              color: '#ffffff',
              lineHeight: 28
              // backgroundColor: '#4C5058',
              // padding: [3, 4],
              // borderRadius: 4
            }
          }
        },
        data: list,
      }
    ],
    // 添加 graphic 组件显示图片
    graphic: {
      elements: [{
        type: 'image',
        key: 'centerImage',
        z: 100,
        style: {
          image: image, // 你的图片路径
          width: 110,
          height: 110
        },
        left: '12%',
        top: 'center'
      }]
    },
    backgroundColor: {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 1,
      y2: 0,
      colorStops: [{
          offset: 0, color: '#01153c89' // 0% 处的颜色
      }, {
          offset: 1, color: '#01153c21' // 100% 处的颜色
      }],
      global: false // 缺省为 false
    },
  }
}
const overviewChartPieRef = ref(null)
const updateDataChartOverview = (data) => {
  const data_1 = [
    { value: data['在建房屋项目'], name: '在建房屋项目', itemStyle: { color: '#00FDF8' } },
    { value: data['在建市政项目'], name: '在建市政项目', itemStyle: { color: '#F8DA00' }},
  ]
  overviewChartPieRef.value?.updateOption(getChartPieOption({ list: data_1, image: icon_house }))
}

const getBarChartOption = (data) => {
  return {
    backgroundColor: {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 1,
      y2: 0,
      colorStops: [{
          offset: 0, color: '#01153c89' // 0% 处的颜色
      }, {
          offset: 1, color: '#01153c21' // 100% 处的颜色
      }],
      global: false // 缺省为 false
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
      }
    },
    grid: {
      top: '26%',
      left: '8%',
      bottom: '5%',
      right: '8%',
      containLabel: true
    },
    legend: {
      show: true,
      right: 'right',
      itemWidth: 6,
      itemHeight: 6,
      width: '100%',
      textStyle: {
        color: '#b4d3ed',
        fontSize: 12,
      },
    },
    xAxis: {
      type: 'category',
      data: data.xAxis,
    },
    yAxis: [
      {
        name: '检查记录数',
        type: 'value',
        position: 'left',
        axisLabel: {
          formatter: '{value}',
          textStyle: {
            color: '#b4d3ed',
            fontSize: 12,
          },
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#b4d3ed',
            width: 1,
          },
        },
        splitLine: {
          show: true,
        },
      },
      {
        name: '检查人次',
        type: 'value',
        position: 'right',
        axisLabel: {
          formatter: '{value}',
          textStyle: {
            color: '#b4d3ed',
            fontSize: 12,
          },
          // margin: 20, // 增加标签与轴的距离
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#b4d3ed',
            width: 1,
          },
        },
        splitLine: {
          show: false,
        },
        offset: 10, // 向右偏移确保数字显示完整
      },
    ],
    series: [
      {
        name: '检查记录数',
        type: 'bar',
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: '#BC36F9' // 0% 处的颜色
            }, {
                offset: 1, color: '#579FFF' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          },
        },
        // emphasis: {
        //   focus: 'series'
        // },
        yAxisIndex: 0,
        data: data['检查记录数'], 
      },
      {
        name: '检查人次',
        type: 'line',
        itemStyle: {
          color: '#FBEE1E',
        },
        yAxisIndex: 1,
        data: data['检查人次'],
      }
    ]
  }
}
const propertyItemLevelChartBarRef = ref(null)
const updateChartBar = (res) => {
  const data  = {
    xAxis: res.cityNames,
    '检查记录数': res['checkNumber'],
    '检查人次': res['checkFrequency'],
  }
  propertyItemLevelChartBarRef.value?.updateOption(getBarChartOption(data))
}


const tableData = ref([])
const updateTableData = (data) => {
  tableData.value = data?.list ?? []
}
const reqConstructionRanking = () => {
  getConstructionRanking({ type: activeName.value })
    .then((res) => {
      updateTableData(res.data)
    })
}

const activeName = ref('房屋建筑类')
const tabList = ref([
  { name: '房屋建筑类' },
  { name: '市政基础设施类' },
])
const onChangeTab = (name) => {
  activeName.value = name
  reqConstructionRanking()
}

const reqData = () => {
  activeName.value = '房屋建筑类'
  Promise.all([
    getProjectOverview(),
    getCheckNum(),
    getConstructionRanking({ type: activeName.value })
  ]).then(([projectOverviewRes, checkNumRes, constructionRankingRes]) => {
    if (projectOverviewRes.success) {
      updateDataChartOverview(projectOverviewRes.data)
    }
    if (checkNumRes.success) {
      updateChartBar(checkNumRes.data)
    }
    if (constructionRankingRes.success) {
      updateTableData(constructionRankingRes.data)
    }
  })
}

onMounted(() => {
  reqData()
})
</script>

<template>
  <div :class="['left', isExpanded ? 'active' : '']">
    <card name="项目总览" class="overview-card">
      <div class="section">
        <div class="chart">
          <draw-echarts
            ref="overviewChartPieRef"
            width="420"
            height="180"
            :options="{}"
          ></draw-echarts>
        </div>
      </div>
    </card>
    <card name="检查数量" class="check-num-card">
      <div class="chart">
        <draw-echarts
          ref="propertyItemLevelChartBarRef"
          width="420"
          height="280"
          :options="{}"
        ></draw-echarts>
      </div>
    </card>
    <card name="施工企业排名" class="company-card">
      <DotsTabs :tab-list="tabList" v-model:activeName="activeName" @change="onChangeTab" />
      <div class="table-wrap">
        <el-scrollbar style="height: 250px;">
          <div class="tr th">
            <div class="name td">企业名称</div>
            <div class="num td">总分</div>
          </div>
          <div class="tr" v-for="(item, index) in tableData" :key="index">
            <div class="name td">
              <el-tooltip :content="item.name"  placement="top" effect="light">
                {{ item.name }}
              </el-tooltip>
            </div>
            <div class="area td">
              <el-tooltip :content="String(item.score)"  placement="top" effect="light">
                {{ item.score }}
              </el-tooltip>
            </div>
          </div>
          <div class="no-data" v-if="!tableData.length">暂无数据</div>
        </el-scrollbar>
      </div>
    </card>
  </div>
</template>

<style scoped lang="scss">
.left {
  .title-icon {
    display: inline-flex;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 61px;
    position: relative;
    bottom: 20px;
    // margin-top: 10px;
  }

  .overview-card {
    // height: 300px;
    // margin-bottom: var(--card-margin-bottom);
  }

  .table-wrap {
    color: #ffffff;
    
    .tr {
      display: flex;
      height: 32px;
      line-height: 32px;
      .td {
        flex: 2;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        word-break: break-all;
        padding: 0 4px;
      }
      .name {
        flex: 7;
      }
    }
    .th {
      color: #bbdbf6;
    }
    .tr:nth-child(odd) {
      background-color: #1c2d4c;
    }
    .tr:nth-child(even) {
      background-color: #08142d;
    }

    .no-data {
      display: flex;
      justify-content: center;
      align-items: center;
      line-height: 3;
      color: #B9D9F4;
    }
  }
}
</style>
